<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品分类 - 阿里宝宝</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/components.css">
    <link rel="stylesheet" href="css/responsive.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <a href="index.html">
                        <i class="fas fa-shopping-bag"></i>
                        <span>阿里宝宝</span>
                    </a>
                </div>
                
                <div class="search-bar">
                    <input type="text" id="searchInput" placeholder="搜索商品...">
                    <button id="searchBtn">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
                
                <div class="header-actions">
                    <a href="cart.html" class="cart-btn">
                        <i class="fas fa-shopping-cart"></i>
                        <span class="cart-count" id="cartCount">0</span>
                    </a>
                    
                    <div class="user-menu">
                        <button class="user-btn" id="userMenuBtn">
                            <i class="fas fa-user-circle"></i>
                            <span id="userName">登录</span>
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <div class="user-dropdown" id="userDropdown">
                            <a href="#" id="loginBtn">
                                <i class="fas fa-sign-in-alt"></i>
                                登录
                            </a>
                            <a href="#" id="registerBtn">
                                <i class="fas fa-user-plus"></i>
                                注册
                            </a>
                            <hr id="userDivider" style="display: none;">
                            <a href="#" id="profileBtn" style="display: none;">
                                <i class="fas fa-user"></i>
                                个人中心
                            </a>
                            <a href="#" id="logoutBtn" style="display: none;">
                                <i class="fas fa-sign-out-alt"></i>
                                退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="main-content">
        <div class="container">
            <!-- 面包屑导航 -->
            <nav class="breadcrumb">
                <a href="index.html">首页</a>
                <i class="fas fa-chevron-right"></i>
                <span id="categoryName">商品分类</span>
            </nav>

            <!-- 页面标题 -->
            <div class="page-header">
                <h1 id="pageTitle">商品分类</h1>
                <p id="pageDescription">浏览不同分类的商品</p>
            </div>

            <!-- 分类筛选 -->
            <div class="category-filters">
                <div class="filter-group">
                    <label>商品分类：</label>
                    <div class="filter-options" id="categoryFilters">
                        <button class="filter-btn active" data-category="">全部</button>
                        <button class="filter-btn" data-category="Food">食品</button>
                        <button class="filter-btn" data-category="Clothing">服装</button>
                        <button class="filter-btn" data-category="Book">图书</button>
                        <button class="filter-btn" data-category="Electronic Products">电子产品</button>
                        <button class="filter-btn" data-category="Daily product">日用品</button>
                    </div>
                </div>
            </div>

            <!-- 商品列表 -->
            <div class="products-section">
                <div class="section-header">
                    <h2>商品列表</h2>
                    <div class="view-options">
                        <button class="view-btn active" data-view="grid">
                            <i class="fas fa-th"></i>
                        </button>
                        <button class="view-btn" data-view="list">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
                
                <div class="products-grid" id="productsGrid">
                    <div class="loading" id="loading">
                        <div class="loading-spinner"></div>
                        <p>加载中...</p>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination" id="pagination">
                    <button class="page-btn" id="prevPage" disabled>
                        <i class="fas fa-chevron-left"></i>
                        上一页
                    </button>
                    <div class="page-numbers" id="pageNumbers"></div>
                    <button class="page-btn" id="nextPage">
                        下一页
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 登录模态框 -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <button class="modal-close" id="closeLoginModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="modal-body">
                <form id="loginForm">
                    <div class="form-group">
                        <label for="loginUsername">用户名</label>
                        <input type="text" id="loginUsername" name="username" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input type="password" id="loginPassword" name="password" required>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block">登录</button>
                    </div>
                </form>
                
                <div class="modal-footer">
                    <p>还没有账号？<a href="#" id="switchToRegister">立即注册</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div class="modal" id="registerModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户注册</h3>
                <button class="modal-close" id="closeRegisterModal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="modal-body">
                <form id="registerForm">
                    <div class="form-group">
                        <label for="registerUsername">用户名</label>
                        <input type="text" id="registerUsername" name="username" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <input type="password" id="registerPassword" name="password" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerEmail">邮箱</label>
                        <input type="email" id="registerEmail" name="email" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerPhone">手机号</label>
                        <input type="tel" id="registerPhone" name="phone" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="registerUserType">用户类型</label>
                        <select id="registerUserType" name="userType" required>
                            <option value="Customer">买家</option>
                            <option value="Seller">卖家</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <button type="submit" class="btn btn-primary btn-block">注册</button>
                    </div>
                </form>
                
                <div class="modal-footer">
                    <p>已有账号？<a href="#" id="switchToLogin">立即登录</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 消息提示 -->
    <div class="toast" id="toast"></div>

    <!-- JavaScript -->
    <script src="js/api.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/product.js"></script>
    <script src="js/cart.js"></script>
    <script src="js/products-page.js"></script>
</body>
</html>
